@import 'base';

//登录页面================
//登录注册找回密码公共表单样式
@-webkit-keyframes shake {
	0%,100% {
		-webkit-transform:translate3d(0, 0, 0);
		transform:translate3d(0, 0, 0)
	}
	10%,30%,50%,70%,90% {
		-webkit-transform:translate3d(-10px, 0, 0);
		transform:translate3d(-10px, 0, 0)
	}
	20%,40%,60%,80% {
		-webkit-transform:translate3d(10px, 0, 0);
		transform:translate3d(10px, 0, 0)
	}
}
@keyframes shake {
	0%,100% {
		-webkit-transform:translate3d(0, 0, 0);
		transform:translate3d(0, 0, 0)
	}
	10%,30%,50%,70%,90% {
		-webkit-transform:translate3d(-10px, 0, 0);
		transform:translate3d(-10px, 0, 0)
	}
	20%,40%,60%,80% {
		-webkit-transform:translate3d(10px, 0, 0);
		transform:translate3d(10px, 0, 0)
	}
}
.translate(@x:-10px,@y:-10px){ -moz-transform: translate(@x,@y); -webkiwt-transform: translate(@x,@y); -o-transform: translate(@x,@y); transform: translate(@x,@y);}

.shake{
	-webkit-animation-name: shake;
	animation-name: shake;
}

.login-bg{
	position:absolute;top:0;left:0;width:100%;height:100%;
}
.login,.reset-pwd{
	position:absolute;top:0;left:0;width:100%;
	.logo{
		margin-top:110/@rem;text-align: center;
		img{width:210/@rem;}
	}
	.company_name{
		margin:30/@rem auto 0;height:88/@rem;line-height:88/@rem;width:560/@rem;background:#dae7f0;.bdr(25px;);.text-c;
		img{width:484/@rem;margin-top:-5/@rem;}
	}
	.bd{
		margin:37/@rem auto 0;width:560/@rem;
		.label{font-size:32/@rem;color:#4d4d4d;display:inline-block;width:180/@rem;.text-r;height:50/@rem;line-height:50/@rem;}
		.pwd-box{margin-top:56/@rem;}
		.v{height:50/@rem;line-height:50/@rem;}
		.inp{width:290/@rem;height:32/@rem;line-height:32/@rem;padding:6/@rem 20/@rem;font-size:32/@rem;background:#f5f5f7;border:1px solid #bdbec0;.bdr(25px);}
		.jump-link{padding-left:180/@rem;margin-top:24/@rem;}
		.forget-pwd-link{color:#666;font-size:22/@rem;margin-left:15/@rem;}
		.to-reg-link{color:#2c88dc;font-size:22/@rem;display:1none;margin-right:60/@rem;}
		.login-btn,.reset-pwd-btn{margin:70/@rem 0 0 180/@rem;color:#fff;width:330/@rem;height:72/@rem;line-height:72/@rem;font-size:30/@rem;background:#2c88dc;border:none;.bdr(20px);}
		.error-tip{color:red;padding-left:180/@rem;font-size:28/@rem;margin-top:30/@rem;display:none;}
	}
	.animated{
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-iteration-count:1;
		animation-iteration-count:1;
	}
}

//首页=======================
.index-page{
	.yx_slider{ //轮播
		position: relative;
		width:100%;
		overflow:hidden;
		.slider-wrap {
			overflow: hidden;
			position: relative;
		}

		.slider-wrap li {
			float: left;
			width: 100%;
			height: 100%;
			position: relative;
			img {
				width: 100%;
			}
		}

		.slide-trigger {
			position: absolute;
			left: 50%;
			bottom: 10px;
			display: inline-block;
			height: .28rem;
			line-height: .28rem;
			text-align: center;
			-webkit-transform: translate(-50%, 0);
			-ms-transform: translate(-50%, 0);
			transform: translate(-50%, 0);

			li {
				display: inline-block;
				width: .28rem;
				height: .28rem;
				-o-border-radius: 50%;
				border-radius: 50%;
				margin-right: .02rem;
				background: #fff;

				&.on{
					background:#fcab35;
				}
			}
		}
	}
	.cat-list{//首页分了列表
		padding:0 20/@rem;margin:28/@rem 0 20/@rem 0;
		.cat-list-ul{overflow:hidden;}
		.item{
			width:50%;float:left;.box-sizing;border-top:2px solid #e7e7e7;border-left:2px solid #e7e7e7;margin-left:-2px;
			padding:0 12/@rem 30/@rem;.text-c;
			img{width:100%;max-height:200/@rem;}
			h3{color:#005db1;font-size:26/@rem;margin-top:20/@rem;}
		}
	}
}

//搜索公共========
.search-box{
	position:relative;.gradient(#a5d6fb,#e3f0fc);height:42/@rem;padding:15/@rem 30/@rem;
	.search{
		position:relative;height:42/@rem;.bdr(25px);background:#f5fbff;
	}
	//列表小分类
	.input-tab{
		display: inline-block;height:42/@rem;overflow:hidden;
		.input-tab-txt{
			position:relative;font-size:22/@rem;height:42/@rem;line-height:38/@rem;float:left;padding:0 30/@rem 0 12/@rem;color:#999;
			&:after{
				content: '';position: absolute;width: 0;height: 0;border-left: 7/@rem solid transparent;border-right: 7/@rem solid transparent;border-top: 10/@rem solid #999;top:16/@rem;right:10/@rem;
			}
		}
	}

	.input-tab-nav{
		position: absolute;left:30/@rem;top:55/@rem;z-index:10;display:none;
		.arrow-box{
			position:relative;height:10/@rem;overflow:hidden;
			.arrow-ico{
				position:absolute;top:1px;width: 0;height: 0;margin-left:-7/@rem;
				border-left: 7/@rem solid transparent;
				border-right: 7/@rem solid transparent;
				border-bottom: 10/@rem solid #484d50;
			}
		}
		ul{
			position:relative;background: #484d50;border-radius: 6px;color: #c7c8c9;overflow:hidden;
		}
		li.item{
			border-top:1px solid #707476;padding:0 20/@rem;margin-top:-1px;height:50/@rem;line-height:50/@rem;.text-c;font-size:22/@rem;
		}
	}

	//搜索input
	.search-inp{
		float:left;width:100%;height:30/@rem;line-height:30/@rem;background:none;border:none;
		padding:6/@rem 0;font-size:24/@rem;}
	.search-inp::-webkit-input-placeholder {font-size:22/@rem;color:#999;}
	.search-inp:-moz-placeholder { font-size:22/@rem;color:#999;}
	.search-inp::-moz-placeholder {font-size:22/@rem;color:#999;}
	.search-inp:-ms-input-placeholder {font-size:22/@rem;color:#999;}

	//搜索按钮
	.search-btn{
		display:inline-block;height:42/@rem;width:60/@rem;background:url(../../img/index/search_ico.jpg) 20/@rem 6/@rem no-repeat;background-size:32/@rem 32/@rem;
	}
}

//商品列表=====
.shop-list{
	margin-bottom:20/@rem;
	a{color:#333;}
	.list-box{
		padding:0 10/@rem;overflow:hidden;
	}
	.list-ul{
		margin-left:-10/@rem;
		.item{
			margin:12/@rem 0 0 10/@rem;float:left;width:295/@rem;padding:5/@rem 5/@rem 0;background:#f1f1f1;
			.pic img{width:295/@rem;height:265/@rem;}
			h3{
				margin-top:20/@rem;font-size:22/@rem;overflow:hidden;-ms-text-overflow: ellipsis;text-overflow: ellipsis;
				white-space: nowrap;
			}
			.spec{margin-top:10/@rem;font-size:20/@rem;line-height:22/@rem;}
			.btn-box{.diy-box;border-top:1px solid #cacaca;margin-top:15/@rem;}
			.btn-wrap{.flex-1;padding:10/@rem 0;display:block;.text-c;}
			.btn{
				display:inline-block;width:32/@rem;height:30/@rem;background:url(../../img/shop_list/shop_list_ico.png)  no-repeat;background-size:34/@rem 124/@rem;
				&.add-to-favorite{background-position:center 1/@rem;}
				&.add-to-favorite.on{background-position:center -31/@rem;}
				&.add-to-shopCart{height:28/@rem;background-position:center -63/@rem;}
				&.add-to-shopCart.on{background-position:center -96/@rem;}
			}
		}
	}
}

//商品详情===========
.shop-detail-body{padding-bottom:204/@rem;}
.shop-deatil{
	overflow:hidden;
	.yx_slider{
		img{width:100%;}
	}
	.intro{
		padding:30/@rem 35/@rem 25/@rem;border-bottom:1px solid #a8a6a7;
		h1{font-size:30/@rem;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
		.other{font-size:18/@rem;color:#d9564c;height:18/@rem;}
		span{margin-left:34/@rem;line-height:56/@rem;overflow:hidden;}
	}
	.detail-box{
		padding:0 35/@rem 25/@rem;overflow:hidden;
		h3{font-size:30/@rem;margin-top:20/@rem;}
		li{font-size:25/@rem;margin-top:20/@rem;line-height:35/@rem;word-break: break-all;}
	}
	.btn-box{
		position:fixed;left:0;bottom:92/@rem;width:100%;margin:0 auto;.box-sizing;padding:15/@rem 20/@rem 35/@rem;background:#fff;
	}
	.add-to-shopCart{display:inline-block;width:188/@rem;height:64/@rem;line-height:64/@rem;border:1px solid #d13129;
		color:#d13129;.text-c;font-size:24/@rem;.bdr(15px);
	}

	.change-num .num{
		font-size:28/@rem;
	}
}

.change-num{
	.minus,.plus{
		display:inline-block;width:70/@rem;height:64/@rem;background:url(../../img/ico/shop_cart_ico.png) no-repeat;
		background-size:30/@rem 112/@rem;.text-c;.user-select-none;
	}
	.minus{
		border:1px solid #b9b9b9;background-position:center -65/@rem;
		-webkit-border-top-left-radius:10px;-moz-border-top-left-radius:10px;-ms-border-top-left-radius:10px;-o-border-top-left-radius:10px;border-top-left-radius:10px;
		-webkit-border-bottom-left-radius:10px;-moz-border-bottom-left-radius:10px;-ms-border-bottom-left-radius:10px;-o-border-bottom-left-radius:10px;border-bottom-left-radius:10px;
	}
	.plus{
		border:1px solid #b9b9b9;background-position:center 17/@rem;
		-webkit-border-top-right-radius:10px;-moz-border-top-right-radius:10px;-ms-border-top-right-radius:10px;-o-border-top-right-radius:10px;border-top-right-radius:10px;
		-webkit-border-bottom-right-radius:10px;-moz-border-bottom-right-radius:10px;-ms-border-bottom-right-radius:10px;-o-border-bottom-right-radius:10px;border-bottom-right-radius:10px;
	}
	.num{
		.text-c;display:inline-block;width:70/@rem;height:64/@rem;font-size:24/@rem;border:none;border-top:1px solid #b9b9b9;border-bottom:1px solid #b9b9b9;
		-webkit-appearance: none;.bdr(0);
	}
}

//提交订单==========
.shop-cart-body{background:#eaeaea;}
.shop-cart{
	margin-bottom:2.4rem;
}
.order-item{ //共用
	a{color:#333;text-decoration: none;}
	position:relative;padding:30/@rem 0;border-top:1px solid #a6a3a5;margin-top:-1px;
	.beautify-checkbox + label {
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15/@rem 10/@rem -12/@rem rgba(0,0,0,0.05);
		padding:13/@rem;
	}
	.beautify-checkbox:checked + label {
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15@rem 10@rem -12@rem rgba(0,0,0,0.05), inset 15@rem 10@rem -12@rem rgba(255,255,255,0.1);
	}
	.beautify-checkbox:checked + label:after {
		font-size:20/@rem;
	}

	.check-state{
		.ico{margin-top:44/@rem;}
	}
	img{width:150/@rem; margin:0 25/@rem;}
	.tit{
		margin:10/@rem 35/@rem  0 0;overflow:hidden;
		h2{
			width:100%;font-size:20/@rem;line-height:30/@rem;max-height:60/@rem;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			word-break: break-all;
		}
	}
	.other{font-size:18/@rem;line-height:30/@rem;}
	.delete{
		position:absolute;top:25/@rem;right:5/@rem;display:inline-block;width:20/@rem;height:28/@rem;background:url(../../img/ico/delete.jpg) no-repeat;
		background-size:contain;
	}
	.change-num{
		position:absolute;bottom:25/@rem;right:5/@rem;
		.minus,.plus{
			width:70/@rem;height:64/@rem;background:url(../../img/ico/shop_cart_ico.png) no-repeat;
			background-size:20/@rem 75/@rem;
		}
		.minus{
			background-position:center -34/@rem;
		}
		.plus{
			background-position:center 22/@rem;
		}
		.num{
			width:70/@rem;height:64/@rem;line-height:64/@rem;font-size:24/@rem;-webkit-appearance: none;.bdr(0);
		}
	}

	//业务员订单
	.pici-info{
		border-top:1px solid #eee;margin-top:10/@rem;padding-top:10/@rem;font-size:18/@rem;
		.pici-item{width:100%;}
		.col{width:50%;float:left;}
	}


}
.shop-cart{
	.order-list{
		margin-top:15/@rem;padding:0 30/@rem;background:#fff;overflow:hidden;
	}
	.add-more-product{
		.text-c;
		i{display:inline-block;margin:20/@rem auto;width:60/@rem;height:42/@rem;border:1px solid #a2a2a2;.bdr(10px);background:#fff url(../../img/ico/shop_cart_ico.png) center 5/@rem no-repeat;background-size:30/@rem 112/@rem;}
	}
	.submit-order{
		position:fixed;bottom:92/@rem;left:0;width:100%;margin:0 auto;background:#fff;border-top:1px solid #d7d7d7;
		.beautify-checkbox + label {
			box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15/@rem 10/@rem -12/@rem rgba(0,0,0,0.05);
			padding:13/@rem;
		}
		.beautify-checkbox:checked + label {
			box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15@rem 10@rem -12@rem rgba(0,0,0,0.05), inset 15@rem 10@rem -12@rem rgba(255,255,255,0.1);
		}
		.beautify-checkbox:checked + label:after {
			font-size:20/@rem;
		}
		.wrap{
			padding:14/@rem 28/@rem;font-size:20/@rem;height:66/@rem;
			.check-all{
				label{position:relative;top:-3/@rem;margin-right:30/@rem;}
				display:inline-block;height:26/@rem;line-height:26/@rem;padding:17/@rem 0;
			}
			.total-box{margin-left:35/@rem;}
			.total-num{color:#d5453e;margin:0 8/@rem;}
			.submit-btn{font-size:24/@rem;height:60/@rem;width:184/@rem;border:1px solid #d5453e;color:#d5453e;background:none;.bdr(20px);}
		}
	}
}

//我的订单
.my-order-body{background:#eaeaea;}
.my-order{
	.order-detail{
		background:#fff;font-size:22/@rem;margin-top:15/@rem;
		.order-list-ul{overflow:hidden;}
		.hd{
			padding:16/@rem 25/@rem;border-bottom:1px solid #aaa7a9;
			.order-num{margin:0 52/@rem 0 15/@rem;}
			label{position:relative;top:-2px;}
			.delete{
				position:relative;top:2px;display:inline-block;width:20/@rem;height:28/@rem;background:url(../../img/ico/delete.jpg) no-repeat;
				background-size:contain;
			}
			.beautify-checkbox + label {
				box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15/@rem 10/@rem -12/@rem rgba(0,0,0,0.05);
				padding:13/@rem;
			}
			.beautify-checkbox:checked + label {
				box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15@rem 10@rem -12@rem rgba(0,0,0,0.05), inset 15@rem 10@rem -12@rem rgba(255,255,255,0.1);
			}
			.beautify-checkbox:checked + label:after {
				font-size:20/@rem;
			}
		}
		.bd{
			padding:0 25/@rem;overflow:hidden;
			.num-box{font-size:22/@rem;margin:50/@rem 40/@rem 0 0;}
			.order-item{
				border-top:1px solid #b0aeaf;
			}
		}
		.ft{
			margin-top:30/@rem;padding:0 30/@rem 30/@rem;
			.order-time{
				font-size:20/@rem;color:#a2a2a2;display:inline-block;height:64/@rem;line-height:64/@rem;margin-left:50/@rem;
			}
			.buy-agin-btn,.audit-btn,.saveInfo-btn{
				display:inline-block;.text-c;height:64/@rem;padding:0 44/@rem;line-height:64/@rem;text-decoration: none;color:#e38580;border:1px solid #e38580;
				.bdr(10px);
			}
		}
	}
}

//审核订单========
.audit-order{
	.order-detail{
		.delete{
			position:absolute;top:25/@rem;right:5/@rem;display:inline-block;width:20/@rem;height:28/@rem;background:url(../../img/ico/delete.jpg) no-repeat;
			background-size:contain;
		}
		.hd{
			overflow:hidden;
			.audit-user{display:block;white-space: nowrap;text-overflow: ellipsis;overflow:hidden;}
			.order-num{margin:0;}
			.txt{
				margin-right:15/@rem;
			}
			.delete{top:18/@rem;right:18/@rem;margin-left:15/@rem;}
		}
		.bd{
			.change-num{position:static;}
			.delete{top:30/@rem;right:18/@rem;margin-left:15/@rem;}
			h2{padding-right:50/@rem;}
		}
		.ft{
			.order-time{
				margin-left:20/@rem;
			}
			.audited-btn{
				display:inline-block;.text-c;height:64/@rem;padding:0 44/@rem;line-height:64/@rem;text-decoration: none;color:#a2a2a2;
				border:1px solid #a2a2a2;.bdr(10px);
			}
			.audit-btn{margin-left:15/@rem;}
		}
		&.audited{
			color:#a2a2a2 !important;
		}
	}
}

//我的 页面=================
//.me-body{.gradient(#5fa4e5,#fffdfe);position:absolute;width:100%;height:100%;}
.me-page{
	position:absolute;top:0;left:0;width:100%;height:100%;
	.user-info{
		margin-top:100/@rem;
		.pt{
			position:relative;z-index:1;width:158/@rem;margin:0 auto;
			img{width:158/@rem;height:158/@rem;padding:4/@rem;background:#fff;border:1px solid #2484db;.bdr(50px);}
		}
		.other-info{
			margin:-52/@rem 14/@rem 0;background:#fff;padding:80/@rem 0 70/@rem;
			.custName{font-size:32/@rem;margin-bottom:20/@rem;}
			.phone{font-size:26/@rem;}
		}
	}
	.link-box{
		margin:30/@rem 14/@rem 0;
		li{
			background:#fff url(../../img/ico/arrow_right.jpg) 97% 24/@rem no-repeat;background-size:17/@rem 26/@rem;margin-bottom:20/@rem;line-height:72/@rem;height:72/@rem;font-size:26/@rem;padding-left:14/@rem;
			a{color:#333;display:block;}
		}
	}
}

#mask{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);}
.modal{
	position:fixed;z-index:11;top:50%;left:50%;.translate(-50%,-50%);width:100%;
	.cont-box{margin:0 20/@rem;background:#fff;.bdr(5px);}
	.bd{
		padding:80/@rem 15/@rem;.text-c;font-size:32/@rem;
	}
	.ft{
		.text-c;overflow:hidden;border-top:1px solid #cacaca;.diy-box;
		a{
			.flex-1;display:block;color:#333;width:50%;height:80/@rem;line-height:80/@rem;font-size:25/@rem;
			&:last-child{border-left:1px solid #cacaca;}
		}
	}
}




